<template>
  <div style="height: 100%; width: 100%;">
    <div id="pointMap" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import * as control from 'ol/control'
import { Logo, TileSuperMapRest, MapService, Graphic, OverlayGraphic } from '@supermap/iclient-ol'
import { Circle, Fill, Stroke } from 'ol/style'
import * as proj from 'ol/proj'
import * as geom from 'ol/geom'
import Image from 'ol/layer/Image'
// import Overlay from 'ol/Overlay'
// import mapUrl from '@/assets/map.csv'
import axios from 'axios'

export default {
  name: 'pointMap',
  data () {
    return {
      features: []
    }
  },
  mounted () {
    this.getPointData()
  },
  methods: {
    // 请求点数据
    getPointData: function () {
      const d3 = require('d3-dsv')
      axios.get('../../static/map.csv').then(res => {
        let ret = d3.csvParse(res.data)
        this.features = ret
        this.initMap()
      })
    },
    // 初始化地图
    initMap: function () {
      let _this = this
      let url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/ChinaDark'
      let map = new Map({
        target: 'pointMap',
        controls: control.defaults({attributionOptions: {collapsed: false}}).extend([new Logo()]),
        view: new View({
          center: proj.transform([-73.9286, 40.75], 'EPSG:4326', 'EPSG:3857'),
          zoom: 12,
          projection: 'EPSG:3857',
          multiWorld: true
        })
      })
      // const d3 = require('d3-dsv')
      // let features = []
      // axios.get('../../static/map.csv').then(res => {
      //   let ret = d3.csvParse(res.data)
      //   features = ret
      // })
      let colorCount = 10
      let colors = getRandomColors(colorCount)
      new MapService(url).getMapInfo(function (serviceResult) {
        let mapJSONObj = serviceResult.result
        let options = TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj)
        let layer = new TileLayer({
          source: new TileSuperMapRest(options)
        })
        map.addLayer(layer)
        let randomCircleStyles = []
        for (let i = 0; i < colorCount; i++) {
          randomCircleStyles.push(new Circle({
            radius: Math.floor(Math.random() * 3 + 1),
            fill: new Fill({
              color: colors[i]
            }),
            stroke: new Stroke({
              color: colors[i]
            })
          }))
        }
        let count = _this.features.length // 矢量点的个数
        let graphics = new Array(count)
        for (let i = 0; i < count; ++i) {
          let coordinates = [Number(_this.features[i].X), Number(_this.features[i].Y)]
          if (coordinates[0] === coordinates[1]) {
            continue
          }
          coordinates = proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857')
          graphics[i] = new OverlayGraphic(new geom.Point(coordinates))
          graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)])
        }
        map.once('postrender', function () {
          let graphicLayer = new Image({
            source: new Graphic({
              graphics: graphics,
              render: 'canvas',
              map: map,
              onClick: function (graphic) {
                if (graphic) {
                  console.log('1111111')
                }
              }
            })
          })
          map.addLayer(graphicLayer)
        })
      })
      function getRandomColors (count) {
        return ['rgba(114, 201, 74, 0.5)', 'rgba(67, 150, 16, 0.5)', 'rgba(109, 186, 42, 0.5)', 'rgba(183, 67, 34, 0.5)', 'rgba(244, 7, 232, 0.5)', 'rgba(198, 27, 156, 0.5)', 'rgba(59, 204, 138, 0.5)', 'rgba(97, 160, 9, 0.5)', 'rgba(234, 86, 165, 0.5)', 'rgba(237, 49, 184, 0.5)']
      }
    }
  }
}
</script>

<style scoped>

</style>
